<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>收藏排行榜</title>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
        <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
        <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
        <style>
	    	.topbar{position:relative}
	    	.hottel{position:absolute;top:12px;right:50px}
	    	.hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
	    	.hottel a{color:#666;text-decoration:none}
	    </style>
    </head>
    <body>
    <!-- 面包屑导航 -->
    <div class="breadcrumb" style="padding: 10px 20px; background-color: #f5f5f5; border-bottom: 1px solid #ddd;">
        <a href="${pageContext.request.contextPath}/luyou/shouye" style="color: #337ab7; text-decoration: none;">首页</a> &gt;
        <span style="color: #999;">收藏排行榜</span>
    </div>

    <!--引入头部-->
    <header id="header" style="background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1000;">
            <div class="header_wrap" style="max-width: 1200px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between;">
                <div class="topbar" style="display: flex; align-items: center; width: 100%;">
                    <div class="logo">
                        <a href="${pageContext.request.contextPath}/luyou/shouye"><img src="${pageContext.request.contextPath}/images/logo.png" style="height: 60px; transition: transform 0.3s ease;" alt=""></a>
                    </div>
                    <form class="search" action="${pageContext.request.contextPath}/luyou/sousuo" style="display: flex; align-items: center; gap: 10px; flex: 0.7; margin: 0 20px;">
                        <input name="route_name" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off" style="width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; transition: border-color 0.3s ease;">
                        <input type="submit" value="搜索" class="search-button" style="padding: 8px 16px; background-color: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease;">
                    </form>
                    <c:choose>
                        <c:when test="${empty user}">
                            <div class="hottel" style="display: flex; gap: 10px;">
                                <a href="${pageContext.request.contextPath}/luyou/login"><p style="cursor: pointer; font-weight: 700; width: 100px; border: 1px solid orange; text-align: center; height: 45px; line-height: 45px; margin-right: 10px; transition: background-color 0.3s ease, color 0.3s ease;">登录</p></a>
                                <a href="${pageContext.request.contextPath}/luyou/zhuce"><p style="cursor: pointer; font-weight: 700; width: 100px; border: 1px solid orange; text-align: center; height: 45px; line-height: 45px; margin-right: 10px; transition: background-color 0.3s ease, color 0.3s ease;">注册</p></a>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div class="haslogin" style="display: flex; align-items: center; gap: 20px;">
                                <p style="margin: 0; font-size: 16px; color: #333;">欢迎：<a href="${pageContext.request.contextPath}/user/gerenzhongxin" style="color: #667eea; text-decoration: none; font-weight: bold; transition: color 0.3s ease;">${user.u_name}</a></p>
                                <p><a href="${pageContext.request.contextPath}/user/tuichu" style="color: #667eea; text-decoration: none; font-weight: bold; transition: color 0.3s ease;">退出登录</a></p>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
            </div>
        </header>
        <div class="contant">
<%--            <div class="shaixuan">--%>
<%--                <span>线路名称</span>--%>
<%--                <input type="text">--%>
<%--                <span>金额</span>--%>
<%--                <input type="text">~<input type="text">--%>
<%--                <button>搜索</button>--%>
<%--            </div>--%>
            <div class="list clearfix">
                <ul>
                    <c:forEach items="${pageInfo.list}" var="route" varStatus="status">
                        <li>
                            <span class="num">${(pageInfo.pageNum - 1) * pageInfo.pageSize + status.index + 1}</span>
                            <a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${route.route_id}"><img src="<%=Res.fileUrl%>${route.route_photo}" alt=""></a>
                            <h4><a href="${pageContext.request.contextPath}/luyou/xiangqing?route_id=${route.route_id}">${route.route_name}</a></h4>
                            <p>
                                <b class="price">&yen;<span>${route.route_price}</span>起</b>
                                <span class="shouchang">已收藏${route.collection_count}次</span>
                            </p>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <div class="pageNum">
                <ul>
                    <!-- 首页 -->
                    <li>
                        <a href="${pageContext.request.contextPath}/collection/paihang?currentPage=1&pageSize=${pageInfo.pageSize}">首页</a>
                    </li>
                    <!-- 上一页 -->
                    <li class="threeword ${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <c:choose>
                            <c:when test="${pageInfo.pageNum > 1}">
                                <a href="${pageContext.request.contextPath}/collection/paihang?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}">上一页</a>
                            </c:when>
                            <c:otherwise>
                                <a href="javascript:void(0);">上一页</a>
                            </c:otherwise>
                        </c:choose>
                    </li>
                    <!-- 页码 -->
                    <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                        <li>
                            <a href="${pageContext.request.contextPath}/collection/paihang?currentPage=${i}&pageSize=${pageInfo.pageSize}" class="${pageInfo.pageNum == i ? 'active' : ''}">${i}</a>
                        </li>
                    </c:forEach>
                    <!-- 下一页 -->
                    <li class="threeword ${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <c:choose>
                            <c:when test="${pageInfo.pageNum < pageInfo.pages}">
                                <a href="${pageContext.request.contextPath}/collection/paihang?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}">下一页</a>
                            </c:when>
                            <c:otherwise>
                                <a href="javascript:void(0);">下一页</a>
                            </c:otherwise>
                        </c:choose>
                    </li>
                    <!-- 末页 -->
                    <li class="threeword">
                        <a href="${pageContext.request.contextPath}/collection/paihang?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}">末页</a>
                    </li>
                </ul>
            </div>
        </div>
    	
         <!--导入底部-->
   		<!-- 尾部 start-->
        <footer id="footer">
            
            <div class="company" style="text-align: center;">
                <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
            </div>
        </footer>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
    </body>
</html>
<style>
    /* 全屏布局优化 */
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;
    }
    #header {
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
    .contant {
        flex: 1;
        padding: 20px;
        background-color: #f9f9f9;
        overflow-y: auto;
    }
    .list ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
        padding: 0;
    }
    .list li {
        background-color: #fff;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .list li:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    .list li img {
        width: 100%;
        height: 150px;
        object-fit: cover;
        border-radius: 8px;
    }
    .list li h4 {
        margin: 10px 0;
        font-size: 18px;
        color: #333;
    }
    .list li p {
        margin: 5px 0;
        color: #666;
    }
    .list li .price {
        color: #ff6b6b;
        font-size: 16px;
    }
    .list li .shouchang {
        color: #666;
        font-size: 14px;
    }
    .pageNum ul {
        display: flex;
        justify-content: center;
        padding: 20px 0;
        list-style: none;
    }
    .pageNum li {
        margin: 0 5px;
    }
    .pageNum a {
        display: block;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        color: #333;
        text-decoration: none;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    .pageNum a:hover {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
    .pageNum .active a {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
    .pageNum .disabled a {
        color: #999;
        cursor: not-allowed;
    }
    .pageNum .disabled a:hover {
        background-color: transparent;
        color: #999;
        border-color: #ddd;
    }</style>
